import 'package:flutter/material.dart';
import '../../util/screen_util.dart';

typedef fnChanged=void Function(int);

class Category extends StatelessWidget{
  final int value;
  final fnChanged onChanged;
  final List<Map> items;
  const Category({super.key,required this.value, required this.onChanged, required this.items});

  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    return Container(
      margin: EdgeInsets.only(top: screen.calc(30)),
      decoration: BoxDecoration(
        border: Border(bottom: BorderSide(color: Color(0xffbcbab9), width: screen.calc(1))),
      ),
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Container(
          margin: EdgeInsets.only(left: screen.calc(2), right: screen.calc(2)),
          child: Row(
            children: items.map((item) => GestureDetector(
              onTap: (){
                onChanged(item['id']);
              },
              child: Container(
                padding: EdgeInsets.only(bottom: value == item['id'] ? screen.calc(23-4) : screen.calc(23)),
                margin: EdgeInsets.only(right: screen.calc(18), left: screen.calc(18)),
                alignment: Alignment.topCenter,
                width: screen.calc(83),
                decoration: BoxDecoration(
                    border: value == item['id'] ? Border(bottom: BorderSide(
                      color: Color(0xffff3a3a),
                      width: screen.calc(4),
                    )) : null
                ),
                child: Text(item['title'] as String,style: TextStyle(
                  fontSize:  screen.calc(28),
                  fontWeight: FontWeight.w700,
                  color: value == item['id'] && item['color'] == null  ? Color(0xffff3a3a) : ( item['color'] == null ? Color(0xff2b2b2b) : Color(item['color'] as int) ),
                ),),
              ),
            )
            ).toList(),
          ),
        ),
      ),
    );
  }

}